<!-- src/components/PieChart.vue -->
<template>
  <div ref="chartEl" style="height: 100%;"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
//mport { defineProps } from 'vue';
import { defineProps } from 'vue';
const props = defineProps({
  data: Array
})

const chartEl = ref(null)
let chartInstance = null

onMounted(() => {
  chartInstance = echarts.init(chartEl.value)
  updateChart()
})

watch(() => props.data, updateChart)

function updateChart() {
  const option = {
    tooltip: { trigger: 'item' },
    legend: {
      orient: 'horizontal',
      top: 'top'
    },
    series: [{
      type: 'pie',
      radius: '70%',
      data: props.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  chartInstance.setOption(option)
}
</script>